<template>
  <el-dialog title="保护参数设置" v-model="openAttr" :width="is_pc == true ? '500px' : '95%'" append-to-body @close="cancel"
    :close-on-click-modal="false">
    <el-form ref="formAttrRef" :model="formAttr" :rules="rulesAttr" label-width="120px">
      <el-form-item label="设备号">
        <span>{{ formAttr.sn }}</span>
      </el-form-item>
      <el-form-item label="单路极限功率" prop="singleLimitPow">
        <el-input-number v-model="formAttr.singleLimitPow" />
        <span class="unit">瓦</span>
      </el-form-item>
      <el-form-item label="整机极限功率" prop="completeLimitPow">
        <el-input-number v-model="formAttr.completeLimitPow" />
        <span class="unit">瓦</span>
      </el-form-item>
      <el-form-item label="漏电电流" prop="leakElec">
        <el-input-number v-model="formAttr.leakElec" />
        <span class="unit">毫安</span>
      </el-form-item>
      <el-form-item label="低电压报警值" prop="lowVoltageAlarms">
        <el-input-number v-model="formAttr.lowVoltageAlarms" />
        <span class="unit">伏</span>
      </el-form-item>
      <el-form-item label="高电压报警值" prop="highVoltageAlarms">
        <el-input-number v-model="formAttr.highVoltageAlarms" />
        <span class="unit">伏</span>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="DialogAttr">
import { getProdAttr, setProdAttr } from "@/api/equipment/control";
import { ElLoading } from "element-plus";

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const openAttr = ref(false);
const devVer = ref(null)
const formAttr = ref({
  devId: undefined,
  sn: undefined,
  singleLimitPow: undefined,
  completeLimitPow: undefined,
  leakElec: undefined,
  lowVoltageAlarms: undefined,
  highVoltageAlarms: undefined,
});

// 表单校验
const rulesAttr = ref({
  singleLimitPow: [
    { required: true, message: "单路极限功率不能为空", trigger: "blur" },
  ],
  completeLimitPow: [
    { required: true, message: "整机极限功率不能为空", trigger: "blur" },
  ],
  leakElec: [
    { required: true, message: "漏电电流不能为空", trigger: "blur" },
  ],
  lowVoltageAlarms: [
    { required: true, message: "低电压报警值不能为空", trigger: "blur" },
  ],
  highVoltageAlarms: [
    { required: true, message: "高电压报警值不能为空", trigger: "blur" },
  ],
})
const is_pc = ref(true)


function getCollapse() {
  const screenWidth = window.innerWidth;
  if (screenWidth < 768) {
    is_pc.value = false;
  } else {
    is_pc.value = true;
  }
}

// 页面宽度变化时
window.onresize = () => {
  getCollapse();
};

function open(id, sn, version) {
  devVer.value = version
  let loadingInstance = ElLoading.service({
    lock: true,
    body: true,
    text: "正在查询",
    background: "rgba(0, 0, 0, 0.7)",
  });
  getProdAttr(sn)
    .then((response) => {
      loadingInstance.close();
      if (response.code == 0) {
        if (response.data) {
          openAttr.value = true;
          formAttr.value = response.data;
        }
        formAttr.value.devId = id;
        formAttr.value.sn = sn;
      }
    })
    .catch((error) => {
      loadingInstance.close();
      formAttr.value.devId = id;
      formAttr.value.sn = sn;
    });
}

// 暴露出去
defineExpose({
  open,
})

// 取消按钮
function cancel() {
  openAttr.value = false;
  reset();
}

function // 表单重置
  reset() {
  formAttr.value = {
    devId: undefined,
    sn: undefined,
    singleLimitPow: undefined,
    completeLimitPow: undefined,
    leakElec: undefined,
    lowVoltageAlarms: undefined,
    highVoltageAlarms: undefined,
  };
  proxy.resetForm("formAttrRef");
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["formAttrRef"].validate((valid) => {
    if (valid) {
      let loadingInstance = ElLoading.service({
        lock: true,
        body: true,
        text: "正在设置",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setProdAttr({
        devId: formAttr.value.devId,
        sn: formAttr.value.sn,
        singleLimitPow: formAttr.value.singleLimitPow,
        completeLimitPow: formAttr.value.completeLimitPow,
        leakElec: formAttr.value.leakElec,
        lowVoltageAlarms: formAttr.value.lowVoltageAlarms,
        highVoltageAlarms: formAttr.value.highVoltageAlarms,
      })
        .then((response) => {
          loadingInstance.close();
          if (response.code == 0) {
            proxy.$modal.notifySuccess("修改成功");
            cancel();
            if (reload.value) reload();
          }
        })
        .catch((error) => {
          loadingInstance.close();
        });
    }
  });
}
</script>

<style scoped>
.unit {
  margin-left: 10px;
}
</style>
